<template>
	<view class="setting-container">
		<!-- 成员信息头部 -->
		<view class="member-info">
			<image class="avatar"
				:src="memberInfo.sysUser && memberInfo.sysUser.avatar || '/static/avatars/default-avatar.jpg'"
				mode="aspectFill" />
			<text class="nickname">{{memberInfo.sysUser && memberInfo.sysUser.nickName || '未知用户'}}</text>
			<text class="wechat-name">微信昵称：{{memberInfo.sysUser && memberInfo.sysUser.nickName || '未知'}}</text>
		</view>

		<!-- 设置列表 -->
		<view class="setting-list">
			<view class="setting-item" @tap="openMemberLevelPicker">
				<text class="label">会员级别</text>
				<text class="value">{{memberInfo.level || '普通成员'}} ></text>
			</view>
			<view class="setting-item">
				<text class="label">设置为管理员</text>
				<switch :checked="isAdmin" @change="handleAdminSwitch" />
			</view>
			<view class="setting-item" @tap="openNumberPicker">
				<text class="label">球衣号码</text>
				<text class="value">{{memberInfo.number || '无'}} ></text>
			</view>
			<view class="setting-item" @tap="openPositionPicker">
				<text class="label">场上位置</text>
				<text class="value">{{memberInfo && memberInfo.position || '暂无位置'}} ></text>
			</view>
			<view class="setting-item" @tap="openHeightPicker">
				<text class="label">身高</text>
				<text class="value">{{memberInfo.height || '未设置'}} ></text>
			</view>
			<view class="setting-item" @tap="openWeightPicker">
				<text class="label">体重</text>
				<text class="value">{{memberInfo.weight || '未设置'}} ></text>
			</view>
			<view class="setting-item" @tap="openSizeSelector">
				<text class="label">球衣尺码</text>
				<text class="value">{{memberInfo.size || '未设置'}} ></text>
			</view>
		</view>

		<!-- 号码选择器 -->
		<uni-popup ref="numberPicker" type="bottom">
			<view class="number-picker">
				<view class="picker-header">
					<text class="title">选择球衣号码</text>
					<text class="close" @tap="closeNumberPicker">×</text>
				</view>
				<scroll-view class="number-list" scroll-y>
					<view class="number-grid">
						<view class="number-item" v-for="num in 151" :key="num"
							:class="{'selected': memberInfo.number === num}" @tap="selectNumber(num)">
							{{num}}
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>

		<!-- 位置选择器 -->
		<uni-popup ref="positionPicker" type="bottom">
			<view class="position-picker">
				<view class="picker-header">
					<text class="title">选择场上位置</text>
					<text class="close" @tap="closePositionPicker">×</text>
				</view>
				<view class="position-list">
					<view class="position-item" v-for="(position, index) in positions" :key="index"
						:class="{'selected': memberInfo.position === position}" @tap="selectPosition(position)">
						{{position}}
					</view>
				</view>
			</view>
		</uni-popup>

		<!-- 身高选择器 -->
		<uni-popup ref="heightPicker" type="bottom">
			<view class="height-picker">
				<view class="picker-header">
					<text class="cancel" @tap="closeHeightPicker">取消</text>
					<text class="title">选择身高</text>
					<text class="confirm" @tap="confirmHeight">确认</text>
				</view>
				<view class="picker-content">
					<picker-view :value="heightIndex" class="picker-view" @change="onHeightChange">
						<picker-view-column>
							<view class="item" v-for="height in heightRange" :key="height">
								{{height}}cm
							</view>
						</picker-view-column>
					</picker-view>
				</view>
			</view>
		</uni-popup>

		<!-- 球衣尺码选择器 -->
		<uni-popup ref="sizeSelector" type="bottom">
			<view class="size-picker">
				<view class="picker-header">
					<text class="cancel" @tap="closeSizeSelector">取消</text>
					<text class="title">选择球衣尺码</text>
					<text class="confirm" @tap="confirmSize">确认</text>
				</view>
				<view class="size-list">
					<view 
						class="size-item" 
						v-for="size in sizes" 
						:key="size" 
						:class="{'selected': tempSize === size}"
						@tap="selectSize(size)"
					>
						{{size}}
					</view>
				</view>
			</view>
		</uni-popup>

		<!-- 体重选择器 -->
		<uni-popup ref="weightPicker" type="bottom">
			<view class="weight-picker">
				<view class="picker-header">
					<text class="cancel" @tap="closeWeightPicker">取消</text>
					<text class="title">选择体重</text>
					<text class="confirm" @tap="confirmWeight">确认</text>
				</view>
				<view class="picker-content">
					<picker-view :value="weightIndex" class="picker-view" @change="onWeightChange">
						<picker-view-column>
							<view class="item" v-for="weight in weightRange" :key="weight">
								{{weight}}kg
							</view>
						</picker-view-column>
					</picker-view>
				</view>
			</view>
		</uni-popup>

		<!-- 会员级别选择器 -->
		<uni-popup ref="memberLevelPicker" type="bottom">
			<view class="level-picker">
				<view class="picker-header">
					<text class="cancel" @tap="closeMemberLevelPicker">取消</text>
					<text class="title">选择会员级别</text>
					<text class="confirm" @tap="confirmMemberLevel">确认</text>
				</view>
				<view class="level-list">
					<view 
						class="level-item" 
						v-for="level in memberLevels" 
						:key="level"
						:class="{'selected': tempLevel === level}"
						@tap="selectLevel(level)"
					>
						{{level}}
					</view>
				</view>
			</view>
		</uni-popup>

		<!-- 底部更新按钮 -->
		<view class="bottom-btn">
			<button class="update-btn" @tap="handleUpdate">更新球员信息</button>
		</view>
	</view>
</template>

<script>
	import {
		getMemberInfo,
		updateMembers
	} from '@/api/youqiu/members.js'
	export default {
		data() {
			return {
				teamId: '',
				id: '',
				memberInfo: {
					sysUser: {
						avatar: '',
						nickName: ''
					},
					position: '',
					height: '',
					weight: '',
					size: '',
					level: '普通成员'
				},
				isAdmin: false,
				positions: ['前锋', '中场', '后卫', '门将', '取消'],
				heightRange: [],
				heightIndex: [22], // 默认选中172cm (150 + 22 = 172)
				tempHeight: 172, // 临时存储选择的身高
				sizes: ['M', 'L', 'XL', 'XXL', 'XXXL'],
				weightRange: [],
				weightIndex: [27], // 默认选中67kg (40 + 27 = 67)
				tempWeight: 67, // 临时存储选择的体重
				memberLevels: ['普通成员', 'VIP1', 'VIP2', 'VIP3', '取消'],
				tempLevel: '', // 临时存储选择的级别
				tempSize: '', // 添加临时尺码变量
			}
		},
		onLoad(options) {
			if (options.teamId) {
				this.teamId = options.teamId
				this.id = options.id
			}
		},
		onShow() {
			if (this.id) {
				this.getMemberInfo()
			}
		},
		created() {
			// 生成身高范围数组 (150-240)
			for (let i = 150; i <= 240; i++) {
				this.heightRange.push(i)
			}
			// 生成体重范围数组 (40-200)
			for (let i = 40; i <= 200; i++) {
				this.weightRange.push(i)
			}
		},
		methods: {
			getMemberInfo() {
				uni.showLoading({
					title: '加载中...'
				})
				getMemberInfo(this.id).then(res => {
					if (res.code === 200) {
						this.memberInfo = res.data
						this.isAdmin = res.data.isAdmin === 1
						
						if (res.data.height) {
							this.heightIndex = [res.data.height - 150]
							this.tempHeight = res.data.height
						}
						if (res.data.weight) {
							this.weightIndex = [res.data.weight - 40]
							this.tempWeight = res.data.weight
						}
						// 初始化临时尺码
						this.tempSize = res.data.size || ''
					} else {
						uni.showToast({
							title: res.msg || '获取成员信息失败',
							icon: 'none'
						})
					}
				}).finally(() => {
					uni.hideLoading()
				})
			},
			handleAdminSwitch(e) {
				this.isAdmin = e.detail.value
			},
			openNumberPicker() {
				this.$refs.numberPicker.open()
			},
			closeNumberPicker() {
				this.$refs.numberPicker.close()
			},
			selectNumber(num) {
				this.memberInfo.number = num
				this.$refs.numberPicker.close()
			},
			openPositionPicker() {
				this.$refs.positionPicker.open()
			},
			closePositionPicker() {
				this.$refs.positionPicker.close()
			},
			selectPosition(position) {
				if (position === '取消') {
					this.$refs.positionPicker.close()
					return
				}
				this.memberInfo.position = position
				this.$refs.positionPicker.close()
			},
			openHeightPicker() {
				// 如果已有身高，设置对应的索引
				if (this.memberInfo.height) {
					this.heightIndex = [this.memberInfo.height - 150]
					this.tempHeight = this.memberInfo.height
				}
				this.$refs.heightPicker.open()
			},
			closeHeightPicker() {
				this.$refs.heightPicker.close()
			},
			onHeightChange(e) {
				const val = e.detail.value
				this.tempHeight = this.heightRange[val[0]]
				this.memberInfo.height = this.tempHeight
			},
			confirmHeight() {
				this.$refs.heightPicker.close()
			},
			openSizeSelector() {
				// 打开时设置临时尺码
				this.tempSize = this.memberInfo.size || ''
				this.$refs.sizeSelector.open()
			},
			closeSizeSelector() {
				this.$refs.sizeSelector.close()
			},
			selectSize(size) {
				this.tempSize = size
				// 实时更新显示
				this.memberInfo.size = size
			},
			confirmSize() {
				this.$refs.sizeSelector.close()
			},
			openWeightPicker() {
				// 如果已有体重，设置对应的索引
				if (this.memberInfo.weight) {
					this.weightIndex = [this.memberInfo.weight - 40]
					this.tempWeight = this.memberInfo.weight
				}
				this.$refs.weightPicker.open()
			},
			closeWeightPicker() {
				this.$refs.weightPicker.close()
			},
			onWeightChange(e) {
				const val = e.detail.value
				this.tempWeight = this.weightRange[val[0]]
				this.memberInfo.weight = this.tempWeight
			},
			confirmWeight() {
				this.$refs.weightPicker.close()
			},
			openMemberLevelPicker() {
				this.tempLevel = this.memberInfo.level || '普通成员'
				this.$refs.memberLevelPicker.open()
			},
			closeMemberLevelPicker() {
				this.$refs.memberLevelPicker.close()
			},
			selectLevel(level) {
				if (level === '取消') {
					this.$refs.memberLevelPicker.close()
					return
				}
				this.tempLevel = level
			},
			confirmMemberLevel() {
				this.memberInfo.level = this.tempLevel
				this.$refs.memberLevelPicker.close()
			},
			handleUpdate() {
				uni.showLoading({
					title: '更新中...'
				})
				
				const params = {
					id: this.id,
					teamId: this.teamId,
					isAdmin: this.isAdmin ? 1 : 0,
					number: this.memberInfo.number,
					position: this.memberInfo.position,
					height: this.memberInfo.height,
					weight: this.memberInfo.weight,
					size: this.memberInfo.size,
					level: this.memberInfo.level
				}
				
				updateMembers(params).then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: '更新成功',
							icon: 'success'
						})
						// 延迟返回，让用户看到成功提示
						setTimeout(() => {
							// 返回上一页并刷新列表
							const pages = getCurrentPages()
							const prevPage = pages[pages.length - 2]
							// 调用上一页的刷新方法
							if (prevPage && prevPage.$vm.listMembers) {
								prevPage.$vm.listMembers()
							}
							uni.navigateBack()
						}, 1500)
					} else {
						uni.showToast({
							title: res.msg || '更新失败',
							icon: 'none'
						})
					}
				}).catch(err => {
					console.error('更新失败:', err)
					uni.showToast({
						title: '更新失败',
						icon: 'none'
					})
				}).finally(() => {
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.setting-container {
		min-height: 100vh;
		background: #f5f5f5;
		padding-bottom: calc(130rpx + env(safe-area-inset-bottom));
	}

	.member-info {
		background: #fff;
		padding: 40rpx 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 20rpx;

		.avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			margin-bottom: 20rpx;
		}

		.nickname {
			font-size: 32rpx;
			color: #333;
			font-weight: bold;
			margin-bottom: 10rpx;
		}

		.wechat-name {
			font-size: 24rpx;
			color: #999;
		}
	}

	.setting-list {
		background: #fff;

		.setting-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx 20rpx;
			border-bottom: 1rpx solid #eee;

			&:last-child {
				border-bottom: none;
			}

			.label {
				font-size: 28rpx;
				color: #333;
			}

			.value {
				font-size: 28rpx;
				color: #999;
			}

			switch {
				transform: scale(0.8);
			}
		}
	}

	.number-picker {
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
		padding-bottom: env(safe-area-inset-bottom);

		.picker-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			border-bottom: 1rpx solid #eee;

			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}

			.close {
				font-size: 40rpx;
				color: #999;
				padding: 0 20rpx;
			}
		}

		.number-list {
			max-height: 60vh;
			padding: 20rpx;
		}

		.number-grid {
			display: flex;
			flex-wrap: wrap;
			padding: 10rpx;

			.number-item {
				width: 20%;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32rpx;
				color: #333;
				margin-bottom: 20rpx;

				&.selected {
					color: #ff6b35;
					font-weight: bold;
				}

				&:active {
					opacity: 0.7;
				}
			}
		}
	}

	.position-picker {
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
		padding-bottom: env(safe-area-inset-bottom);

		.picker-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			border-bottom: 1rpx solid #eee;

			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}

			.close {
				font-size: 40rpx;
				color: #999;
				padding: 0 20rpx;
			}
		}

		.position-list {
			padding: 20rpx;

			.position-item {
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32rpx;
				color: #333;
				border-bottom: 1rpx solid #eee;

				&:last-child {
					border-bottom: none;
					color: #999;
				}

				&.selected {
					color: #ff6b35;
					font-weight: bold;
				}

				&:active {
					background: #f8f8f8;
				}
			}
		}
	}

	.height-picker {
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
		padding-bottom: env(safe-area-inset-bottom);

		.picker-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			border-bottom: 1rpx solid #eee;

			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}

			.cancel {
				font-size: 28rpx;
				color: #999;
				padding: 0 20rpx;
			}

			.confirm {
				font-size: 28rpx;
				color: #ff6b35;
				padding: 0 20rpx;
			}
		}

		.picker-content {
			height: 400rpx;

			.picker-view {
				width: 100%;
				height: 100%;
			}

			.item {
				line-height: 80rpx;
				text-align: center;
				font-size: 32rpx;
				color: #333;
			}
		}
	}

	.size-picker {
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
		padding-bottom: env(safe-area-inset-bottom);

		.picker-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			border-bottom: 1rpx solid #eee;

			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}

			.cancel,
			.confirm {
				font-size: 28rpx;
				padding: 0 20rpx;
			}

			.cancel {
				color: #999;
			}

			.confirm {
				color: #ff6b35;
			}
		}

		.size-list {
			padding: 20rpx;

			.size-item {
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32rpx;
				color: #333;
				border-bottom: 1rpx solid #eee;

				&:last-child {
					border-bottom: none;
				}

				&.selected {
					color: #ff6b35;
					font-weight: bold;
				}

				&:active {
					background: #f8f8f8;
				}
			}
		}
	}

	.weight-picker {
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
		padding-bottom: env(safe-area-inset-bottom);

		.picker-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			border-bottom: 1rpx solid #eee;

			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}

			.cancel {
				font-size: 28rpx;
				color: #999;
				padding: 0 20rpx;
			}

			.confirm {
				font-size: 28rpx;
				color: #ff6b35;
				padding: 0 20rpx;
			}
		}

		.picker-content {
			height: 400rpx;

			.picker-view {
				width: 100%;
				height: 100%;
			}

			.item {
				line-height: 80rpx;
				text-align: center;
				font-size: 32rpx;
				color: #333;
			}
		}
	}

	.level-picker {
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
		padding-bottom: env(safe-area-inset-bottom);

		.picker-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			border-bottom: 1rpx solid #eee;

			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}

			.cancel, .confirm {
				font-size: 28rpx;
				padding: 0 20rpx;
			}

			.cancel {
				color: #999;
			}

			.confirm {
				color: #ff6b35;
			}
		}

		.level-list {
			padding: 20rpx;

			.level-item {
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32rpx;
				color: #333;
				border-bottom: 1rpx solid #eee;

				&:last-child {
					border-bottom: none;
					color: #999;
				}

				&.selected {
					color: #ff6b35;
					font-weight: bold;
				}

				&:active {
					background: #f8f8f8;
				}
			}
		}
	}

	.bottom-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx;
		background: #fff;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));

		.update-btn {
			width: 100%;
			height: 88rpx;
			background: #4CAF50;
			color: #fff;
			border-radius: 44rpx;
			font-size: 32rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border: none;

			&:active {
				opacity: 0.8;
			}
		}
	}
</style>